<template>
<div class="inforBox">
    <div class="head">
        <div class="headBox">
            <img :src="`${imgurl}logo.png`" />
            <span class="title">完善WIRE AI账号信息</span>
            <span class="link" @click="back" href="https://wireai.com/ ">返回</span>
        </div>
    </div>
	<div class="warper">
		<div class="infoBox clearfix">
		    <div class="classList">
		        <span :class="[{active:type == item.id},'title']" v-for="item in identity" :key="item.id" @click="changeIndentity(item.id)">
		            <i>{{ item.title }}</i>
		        </span>
		    </div>
		    <div class="content">
				<div class="node">
					<span class="title">姓名</span>
					<input
						type="input" :class="[{active:isnickname},'text']" 
						v-model="nickname" 
						placeholder="姓名"
						@focus="handelInput(0)"
						@input="handelInput(0)"
						@blur="handelInput2(0)"
					/>
				</div>
				<div class="node">
					<span class="title">企业名称</span>
					<input
						type="input" :class="[{active:isCompany},'text']" 
						v-model="companyname" 
						placeholder="企业名称" 
						@focus="handelInput(1)"
						@input="handelInput(1)"
						@blur="handelInput2(1)"
					/>
				</div>
				
				<div class="node code" v-if="type == 2">
					<span class="title">角色</span>
				    <div class="text textnode" @click="openRole">{{ rolename }}</div>
				    <span :class="[{active:isRole},'btnup']" @click="openRole"></span>
				    <div class="select" v-if="isRole">
				        <ul>
				            <li :class="roleId == item.id ? 'active' : ''" v-for="(item,index) in roleList" :key="index" @click="checkRole(index)">{{ item.title }}</li>
				        </ul>
				        <input type="input" :class="[{active:isInput},'input']" @input="roleText" @focus="handelInput3"
					@blur="handelInput4" v-model="roles" placeholder="其他"/>
						<span class="dui" v-if="roles" @click="openRole"></span>
				    </div>
				</div>
				<div class="industry">
				    <div class="flexC name">
				        <span :class="[{gxq:type == 1},'top']">
							<i :class="type==2 ? 'active' : ''">{{ type == 2 ? '产业选择' : '感兴趣产品'}}</i>（<A>{{ indusArr.length }}</a>/{{ indusList.length }}）</span>
				    </div>
				    <div class="list clearfix">
				        <span :class="[{active:item.isCheck},{short:item.title.length<3},'listLi span']" v-for="(item,index) in indusList" :key="index" @click="checkIndus(item.id)" >
				            {{ item.title }}
				        </span>
                        <span v-if="!isOther" class="listLi span" :key="index" @click="getohter">
				            其他
				        </span>
                        <input v-else maxlength="8" type="input" class="active infoText" @input="infoText" @focus="handelInput3"
					@blur="handelInput4" v-model="infoname" placeholder="其他(最多输入8个字)"/>
				    </div>
				</div>
		       
		        <span class="saveBtn show" @click="toSubmit" v-if="isComplete == true">提交</span>
		        <span class="saveBtn disable show" @click="checkSubmit" v-else>提交</span>	
                <div class="mark" @click="getCheck"><span :class="[{active:isChecked},'check']"></span>您同意WIRE AI通过 您填写的联系方式联系您，且数据仅用于与您沟通。</div>
				<span class="error show" v-if="isError">请同意我们通过联系方式联系您</span>
		    </div>
		</div>
		<div class="bg" v-if="base.isMobile">
            <img :src="`${imgurl}wabbg02.png`" />
        </div>
	</div>
    <div class="filings" v-if="!base.isMobile">
        WIRE AI 账号用户协议<a>I</a>关于 WIRE AI 账号与隐私声明<a>I</a>WIRE AI 账号 版权所有 © 2011-2024   
    </div>
</div>

</template>

<script setup lang='ts'>
	import { useUserStore } from "@/store/modules/user";
    import router from "@/router";
    import { LocationQuery, LocationQueryValue, useRoute } from "vue-router";
	import { useSystemStore } from "@/store/modules/system";
    const api = inject('$base', null as any);
	const $_ = inject('$_', null as any);
	const base = useSystemStore();
    const userStore = useUserStore();
	const route = useRoute();
	const nickname = ref<string>();
    const companyname = ref<string>();
    const isBottom = ref<boolean>(false);
    const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
    const identity = ref<any>([
        { id : 1, title:'丝网买家' },
        { id : 2, title:'丝网行业者' }
    ])
    const rolename = ref<string>('角色选择（单选）');
    const roles = ref<string>();
    const indusArr = ref<any>([]);
    const indusId = ref<number>();
    const roleId = ref<number>();
    const type = ref<number>(1);
    const isRole = ref<boolean>(false);
    const roleList = ref<any>([]);
    const indusList = ref<any>([]);
    const isComplete = ref<boolean>(false);
	const debounceTimer = ref(null);
	const isChecked = ref<boolean>(false);
	const isnickname = ref<boolean>(false);
	const isCompany = ref<boolean>(false);
	const isError = ref<boolean>(false);
	const isInput = ref<boolean>(false);
	const isInfoInput = ref<boolean>(false);
	const infoname = ref<string>();
    const isMobile = ref<boolean>(false);
    const isOther = ref<boolean>(false);
    function changeIndentity(id:number){
        type.value = id;
		checkInput();
    }
    function openRole(){
        isRole.value = !isRole.value;
    }
    function checkRole(index:number){
        rolename.value = roleList.value[index].title;
        isRole.value = false;
        roleId.value = roleList.value[index].id;
		roles.value = '';
		checkInput();
    }
	function getCheck(){
		isChecked.value = !isChecked.value;
	}
    function getohter(){
        isOther.value = !isOther.value;
    }
    function roleText(){
        isInput.value = true;
        clearTimeout(debounceTimer.value);
		debounceTimer.value = setTimeout(() => {
            if(rolename.value){
			    rolename.value = roles.value;
                roleId.value =  '';
            }
		}, 300); 
    }
    function checkIndus(id:number){
        indusList.value.forEach((item)=>{
            if(item.id == id){
                item.isCheck = !item.isCheck;   
            }
        })
        getCount();
		checkInput()
    }
    function getCount(){
		indusArr.value = [];
        indusList.value.forEach((item)=>{
            if(item.isCheck){
                indusArr.value.push(item.title);
               
            }
        })
    }
    function getrole(){
        api.rolelist().then(res=>{
            roleList.value = res.data;
        })
    }
    function getindustry(){
        api.industrylist().then(res=>{
            indusList.value = res.data;
        })
    }
	function handelInput(type:number){
        if(isMobile.value){
            isBottom.value = true; 
        }
		if(type == 0){
			isnickname.value = true;
		}else{
			isCompany.value = true;
		}
		checkInput();
	}
    function handelInput2(type:number){
        isBottom.value = false;
        isCompany.value = false;
        isnickname.value = false;
		checkInput();
	}
    function handelInput3(){
        if(isMobile.value){
            isBottom.value = true; 
        }
	}
    function handelInput4(){
        
        isBottom.value = false;
		if(!infoname.value){
			isInfoInput.value = false;
            isOther.value = false
		}
	}
	function infoText(){
		isInfoInput.value = true;

		checkInput()
	}
	function hideInput(type:number){
		if(type == 0){
			isnickname.value = false;
		}else{
			isCompany.value = false;
		}
		checkInput();
	}
	function checkInput(){
		if(type.value == 1){
			if(!nickname.value || !companyname.value){
				isComplete.value = false;
			}else{
				isComplete.value = true;
			}
		}else{
			if(!nickname.value || !companyname.value || rolename.value == '角色选择（单选）' || !rolename.value || (indusArr.value.length == 0 && !infoname.value)){
				isComplete.value = false;
			}else{
				isComplete.value = true;
			}
		}
		
	}
	function checkLogin(){
		if(!nickname.value){
			isnickname.value = true;
			return false;
		}else if(!companyname.value){
			isCompany.value = true;
			isComplete.value = false;
			return false;
		}else if(!isChecked.value){
			isError.value = true;
			setTimeout(()=>{
				isError.value = false;
			},1500)
			return;
		}else{
			isComplete.value = true;
			return true;
		}
	}
    const emit = defineEmits(['getLogins']);
	function checkSubmit(){
		if(!nickname.value){
			ElMessage({
			    message: '请输入您的姓名',
			    type: 'error',
			})
			return;
		}
		if(!companyname.value){
			ElMessage({
			    message: '请输入企业名称',
			    type: 'error',
			})
			return;
		}
		let rols = rolename.value == '角色选择（单选）' ? '' : rolename.value;
		if(!rols && type.value == 2){
			ElMessage({
			    message: '请选择或输入角色',
			    type: 'error',
			})
			return;
		}
		if((indusArr.value.length == 0 && !infoname.value) && type.value == 2){
			ElMessage({
			    message: '请选择或输入产业选择',
			    type: 'error',
			})
			return;
		}
	}
    function toSubmit(){
		if(!isChecked.value){
			isError.value = true;
			setTimeout(()=>{
				isError.value = false;
			},1500)
			return;
		}
        let rols = rolename.value == '角色选择（单选）' ? '' : rolename.value;
		if(!rols && type.value == 2){
			ElMessage({
			    message: '请选择或输入角色',
			    type: 'error',
			})
			return;
		}
        let data = {
            id : userStore.userIds,
			nickname : nickname.value,
            identity : identity.value[type.value-1].title,
            companyname : companyname.value,
            role : rols,
            industry : indusArr.value.join(','),
            otherindustry : infoname.value
        }
        api.completeinfo(data).then(res=>{
            ElMessage({
                message: '信息已完善',
                type: 'success',
            })
            userStore.isSubInfo = true;
            userStore.ishoveStatus = false;
            emit('getLogins', true)
        })
    }
    function back(){
        localStorage.clear();
        location.reload();
    }
    onMounted(()=>{
        getrole();
        getindustry();
        const width = window.innerWidth;
        if(width < 768){
            isMobile.value = true;
        }
    })
</script>
<style lang="scss" scoped>
.inforBox {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    background: url(../../assets/images/logbg3.jpg) no-repeat center center;
    background-size: cover;
    padding-top:46px;
	left: 0;
	top:0;
	z-index: 999;
    .head{
        background:#f1f6fc;
        border-bottom: solid 1px #dbe2ee;
        padding:0 20px 0 15px;
        height:46px;
        position:fixed;
        z-index:10;
        left:0;
        top:0;
        width:100%;
        .headBox{
            width:1000px;
            margin:0 auto;
            display:flex;
            align-items:center;
            justify-content:start;
            height:100%;
            position:relative;
            .title{
                font-size:16px;
                color:#595757;
                font-family:'siyuanR';
                padding-left:28px;
                position:relative;
                &::before{
                    position:absolute;
                    width:2px;
                    height:14px;
                    background:#ced5da; 
                    left:13px;
                    top:50%;
                    margin-top:-7px;
                    content:'';
                }
            }
            .link{
				position:absolute;
                right:0;
                top:0;
				color:#9094b0;
				font-size:14px;
				display:flex;
				height:100%;
				align-items:center;
                cursor:pointer;
			}
        }
        img{
            width:94px;
            height:25px;
        }
        
    }
}
.warper{
	width: 100%;
	height: calc(100vh - 80px);
	display: flex;
	align-items: center;
	justify-content: center;
    .bg{
        width:100%;
        margin-top:-20px;
        img{
            width:100%;
        }
    }
}
.infoBox{
    background: url(../../assets/images/logbg4.png) no-repeat top center;
    background-size: cover;
    border-radius:5px;
    width:1000px;
    min-height:390px;
	max-height: 100%;
    height:auto;
    padding:20px 10px 10px 10px;
    box-shadow:2px 3px 7px rgba(166,182,229,.41);
    .classList{
        height:40px;
        width:100%;
        position:relative;
        text-align:center;
        display:flex;
        justify-content:center;
        &::before{
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:1px;
            background:#dbe2ee;
            content:'';
        }
        .title{
            width:240px;
            height:100%;
            text-align:center;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:16px;
            color:#9094b0;
            font-family:'siyuanN';
            cursor:pointer;
            &.active{
                color:#448efb;
            }
            i{
                display:inline-block;
                font-style:normal;
                height:100%;
                position:relative;
            }
            &.active{
                i::after{
                    position:absolute;
                    bottom:0;
                    height:2px;
                    background:#448efb;
                    content:'';
                    width:100%;
                    left:0;
                }
            }
        }
    }
    .content{
        width:432px;
        margin:0 auto;
        padding-top:45px;
		position: relative;
		.node{
			display: flex;
            margin-bottom:20px;
			.title{
				font-size:14px;
				width: 80px;
				margin-right: 5px;
				padding-right: 10px;
				font-family: 'siyuanR';
				color:#9094b0;
				line-height: 30px;
				text-align: justify;
				display: block;
				word-break: break-all;
				text-align: justify;
				text-align-last: justify;
				position: relative;
				&::after{
					color: #ea1d13;
					content: '*';
					position: absolute;
					right:5px;
					top:-2px;
					font-size: 12px;
				}
			}
		}
        .code{
            width:432px;
            position:relative;
            // margin:0 auto;
            .btnup{
                position:absolute;
                height:32px;
                right:0;
                width:40px;
                top:0;
                background: url(../../assets/images/btnup.png) no-repeat center center;
                background-size:8px 5px;
                cursor:pointer;
                transition:all .6s;
				user-select: none;
				cursor: default;
                &.active{
                    transform: rotate(360deg);
                }
            }
        }
		.infoText{
		    border:solid 1px #d3e0ee;
		    border-radius:5px;
		    width:160px;
		    height:32px;
		    background:none;
		    outline:none;
		    padding:0 15px;
		    color:#9094b0;
		    &::placeholder{
		        color:#9094b0;
		    }
			&.active{
				color: #448efb;
				border:solid 1px #619ef8;
			}
		}
        .select{
            background:#fff;
            position:absolute;
            right:0;
            top:36px;
            width:calc(100% - 72px);
            border:solid 1px #dbe2ee;
            box-shadow:2px 3px 7px rgba(166,182,229,.41);
            height:auto;
            border-radius:5px;
            padding:10px 20px;
			z-index: 99;
			.dui{
				background: url(../../assets/images/icon_dui.png) no-repeat center center;
				background-size:10px 10px;
				width: 30px;
				height: 28px;
				position: absolute;
				display: block;
				right:20px;
				bottom: 10px;
				cursor: pointer;
				
			}
            .input{
                border:solid 1px #d3e0ee;
                border-radius:5px;
                width:100%;
                height:30px;
                background:none;
                outline:none;
                padding:0 18px;
                color:#9094b0;
                margin-top:5px;
				flex: 1;
                &::placeholder{
                    color:#9094b0;
                }
				&.active{
					color: #448efb;
					border:solid 1px #619ef8;
				}
            }
            ul{
                height:auto;
                // overflow-y:scroll;
                li{
                    color:#9094b0;
                    padding-left:16px;
                    cursor:pointer;
                    font-size:12px;
                    line-height:26px;
                    &:hover,
                    &.active{
                        color:#2379f7;
                        position:relative;
                        &::after{
                            background:#448efb;
                            width:6px;
                            height:6px;
                            left:2px;
                            top:50%;
                            transform:translateY(-50%);
                            content:'';
                            position:absolute;
                            border-radius:50%;
                        }
                    }
                }
            }
        }
        .text{
            background:#ffffff;
            border:solid 1px #dbe2ee;
            width:100%;
            height:32px;
            border-radius:5px;
            padding:0 13px;
            outline:none;
            font-size:14px;
            color:#9094b0;
            display:flex;
            align-items:center;
            justify-content:start;
			&.textnode{
				user-select: none;
				cursor: default;
				cursor: pointer;
			}
			&.active{
				border: solid 1px #5d9cf9;
			}
            &.hov{
                cursor:pointer;
            }
            &::placeholder{
                color:#9094b0;
            }
        }
    }
    .saveBtn{
        width:100%;
        height:40px;
        border-radius:5px;
        text-align:center;
        line-height:40px;
        color:#fff;
        font-size:15px;
        cursor:pointer;
        background:#0189f6;
        margin-top:20px;
        &.disable{
            background:#8cb9fa;
        }
    }
	.error{
		color:#fb240e;
		width:100%;
		text-align:center;
		font-size:12px;
		position: absolute;
		bottom: -5px;
		left:0;
	}
    .mark{
        width:100%;
        font-size:12px;
        color:#9094b0;
        min-height:40px;
        padding: 0 0 0 15px;
        line-height: 40px;
		cursor: pointer;
        position: relative;
        .check{
            width:10px;
            height:10px;
            border:solid 1px #c8d8ea;
            display:inline-block;
            border-radius:50px;
            cursor:pointer;
            position: absolute;
            left: 0;
            top:15px;
            &.active{
                border:none;
                background: url(../../assets/images/check2.png) no-repeat;
                background-size:10px 10px;
            }
        }
    }
    .industry{
        .name{
            width:100%;
            height:30px;
            .top{
                background: url(../../assets/images/icon9.png) no-repeat left center;
                background-size:19px 15px;
                padding-left:25px;
                color:#6c708b;
                font-size:14px;
                margin:0 auto;
                display:inline-block;
				user-select: none;
				cursor: default;
                &.gxq{
                    background: url(../../assets/images/icon13.png) no-repeat left center;
                    background-size:18px 17px;
                }
                a{
                    color:#2379f7;
                }
				i{
					font-style: normal;
					
				}
				.active{
					padding-right: 5px;
					position:relative;
					&::after{
						color: #ea1d13;
						content: '*';
						position: absolute;
						right:0;
						top:-3px;
						font-size: 12px;
					}
				}
            }
        }
        .list{
            width:745px;
            margin-left:-156.5px;
            .listLi{
                color:#9094b0;
                font-size:12px;
                padding:0 20px;
                border:solid 1px #dbe2ee;
                border-radius:5px;
                height:32px;
                display:flex;
                align-items:center;
                float:left;
                background:#f8fbfd;
                cursor:pointer;
                margin:5px 6px;
                &:hover{
                    color:#448efb;
                    border:solid 1px #448efb;
                }
                &:nth-child(8){
					padding:0 26px;
                }
                &.active{
                    background:#448efb;
                    color:#fff;
                }
            }
        }
       
    }
}
.filings{
    width:100%;
    color:#9094b0;
    position:fixed;
    bottom:20px;
    text-align:center;
    left:0;
    font-size:12px;
    padding: 0 15px;
    a{
        margin:0 20px;
    }
    
}
@media (max-width: 768px) {
    .inforBox{
        padding-bottom: 140px;
    }
    .infoBox{
        width:calc(100% - 30px);
        margin:40px 15px 0 15px;
        min-height: 300px;
        height:auto;
        max-height:150%;
        .content{
            width: 100%;
            padding-top:25px;
            .code{
                width: 100%;
            }
            .node{
                margin-bottom:15px;
                .title{
                    width:90px;
                }
            }
            .text{
                height:35px;
            }
        }
        .industry{
            .list{
                width: 100%;
                margin-left: 0;
                .listLi{
                    padding: 0 6px;
                    font-size:12px;
                    height:28px;
                    margin:5px;
                    &:nth-child(8){
                        padding:0 6px;
                    }
                }
            }
        }
        .mark{
            padding:10px 0 10px 15px;
            line-height:20px;
        }
    }
    
    .filings{
        bottom: 5px;
        line-height: 18px;
    }
    .warper{
        display:block;
        overflow-y:scroll;
        margin-bottom:40px;
        height: calc(100vh - 46px);
    }
}
</style>